<template>
  <div class="page min-win-he">
    <!-- 头部导航 -->
    <hea-der></hea-der>
    <div class="content">
      <!-- 侧边栏 -->
      <side-dar @tabsOpen='tabsOpen'></side-dar>
      <div class="main-content min-win-he">
        <transition
          name="move"
          mode="out-in"
        >
          <keep-alive :include="tagsList">
            <router-view></router-view>
          </keep-alive>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import HeaDer from '@/components/index/HeaDer.vue'
import SideDar from '@/components/index/Sidebar.vue'
export default {
  name: 'dashboard',
  components: {
    HeaDer,
    SideDar,
  },
  data() {
    return {
      isCollapse: true,
      tagsList: [],
    }
  },
  methods: {
    tabsOpen(e) {
      console.log(e)
      if (e.key != '/NetworkDisk') {
        this.tagsList.push(e.key)
      }
      this.$router.push({
        path: '/dashboard' + e.key,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  // height: calc(100vh - 3.6rem);
  // margin-top: 3.6rem;
  display: flex;

  .main-content {
    width: calc(100vw - 250px);
    // height: 100%;
    // background-color: #f7f7f7;
    // overflow-y: scroll;
    // box-sizing: border-box;
    padding: 10px 10px 0 6px;
  }

  // /* 定义滚动条样式 */
  // .main-content::-webkit-scrollbar {
  //   width: 7px;
  //   height: 100%;
  //   background-color: rgb(238, 238, 238);
  //   border-radius: 10px;
  // }
  // /*定义滚动条轨道 内阴影+圆角*/
  // .main-content::-webkit-scrollbar-track {
  //   /* box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); */
  //   border-radius: 10px;
  //   /* background-color: rgba(4, 56, 114, 0.5); */
  // }
  // /*定义滑块 内阴影+圆角*/
  // .main-content::-webkit-scrollbar-thumb {
  //   border-radius: 10px;
  //   box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
  //   background-color: rgba(184, 184, 184, 0.5);
  // }
}
</style>